<template>
    <div>
        <van-sticky @scroll="scrollit">
        <div class="movieName" :style="'margin-top:'+top">
            <div class="line1"><span class="left11">{{activeDtl.name}}</span><span class="right11">{{activeDtl.grade}}分</span></div>
            <div  class="line2"><li>{{activeDtl.category}}</li><li>{{activeDtl.director}}</li><li v-for="actor in activeDtl.actors" :key="actor.name">{{actor.name}}</li></div>
        </div>
        <ul  class="dateLine" v-if="activeDtl.showDate">
            <li class="dateList" v-for="item in activeDtl.showDate" :key="item"><router-link :to="`/cinemas/${$route.params.id}/films/${$route.params.mid}/${item}`">{{getDate(item)}}{{new Date(item*1000).getMonth()+1}}月{{new Date(item*1000).getDate()}}日</router-link></li> 
        </ul>
        </van-sticky>

        <router-view></router-view>

    </div>

</template>

<style lang="scss" scoped>
.movieName{
    height:1.6rem;
    padding:0.3rem 0;
    box-sizing: border-box;
    background-color: white;

    .line1{
        height:0.38rem;
        margin-bottom:0.2rem;
        font-size: 0.15rem;
        text-align: center;
        .left11{
            margin-right:0.3rem;
                    font-size: 0.2rem;

        }
        .right11{
            font-size:0.16rem;
    font-style: italic;
    color: #ffb232;
        }
    }
    .line2{
        box-sizing: border-box;
        width:7.5rem;
        height:0.36rem;
        padding:0 0.96rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        li{
            float: left;
            margin:0 0.05rem;
            color: #797d82;
            font-size: 0.26rem;
        }
    }
}
    .dateLine{
        height:0.98rem;
        background-color: white;
        overflow: hidden;
        li{
            float:left;
            height:0.98rem;
            width:1.7768rem;
            text-align:center;
            line-height: 0.98rem;
            margin:0 0.2rem;
            font-size:0.28rem;
        }
    }
    .router-link-exact-active{
                    float:left;
            height:0.98rem;
            width:1.7768rem;
            text-align:center;
            line-height: 0.98rem;
            margin:0 0.2rem;

        color:#ff5f16;
        border-bottom:0.01rem solid #ff5f16;
    }


</style>

<script>
export default {
    data(){
        return{
            top:0
        }
    },
    props:['activeDtl'],
    methods:{
        getDate(time){
            if(new Date(time*1000).getDate()===new Date().getDate()){
                return '今天'
            }
            else if(new Date(time*1000).getDate()-1===new Date().getDate()){
                return '明天'
            }
            else if(new Date(time*1000).getDate()-2===new Date().getDate()){
                return '后天'
            }else{
                return ' '
            }

        },
        scrollit(e){
        if(e.isFixed){
          this.top='0.88rem'
        }
        }
    },
    watch:{
    }
}
</script>

